<template>
    <div>
      <el-card>
        <div slot="header">
          <el-row :gutter="6">
            <el-col :span="6">
              <el-input v-model="options.studentName" placeholder="请输入姓名" clearable></el-input>
            </el-col>
            <el-col :span="18">
              <el-radio v-model="options.isNull" label="1">未批阅</el-radio>
              <el-radio v-model="options.isNull" label="0">已批阅</el-radio>
              <el-select v-model="options.classId" placeholder="请选择">
                <el-option
                  v-for="item in classInfos"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-button @click="selectResult" style="margin-left: 10px" type="primary" icon="el-icon-search">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          style="width: 100%;">
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="className"
            header-align="center"
            align="center"
            label="班级">
          </el-table-column>
          <el-table-column
            prop="studentName"
            header-align="center"
            align="center"
            label="学生姓名">
          </el-table-column>
          <el-table-column
            prop="projectName"
            header-align="center"
            align="center"
            label="课程名称">
          </el-table-column>
          <el-table-column
            prop="result"
            header-align="center"
            align="center"
            label="成绩">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.result"
                :type="scope.row.result >= 60 ? 'success' : 'danger'"
                effect="dark">
                {{ scope.row.result }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, scope.row.result)">{{scope.row.result ? '修改' : '批阅'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        title="批阅成绩"
        :visible.sync="dialogVisible"
        width="20%">
        <el-input-number v-model="result" :min="0" :max="150"></el-input-number>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateResult">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import {mixin} from "../mixins";
  import {mapGetters} from 'vuex'
  import {classInfoByTeacherId, resultByTeacherId, updateResult} from "../api/edm";

  export default {
    name: "EDM",
    mixins: [mixin],
    computed: {
      ...mapGetters([
        "teacherId"
      ])
    },
    data(){
      return{
        options: {
          teacherId: '',
          isNull: '1',
          classId: '',
          studentName: ''
        },
        classInfos: [],
        dataList: [],
        dataListLoading: false,
        dialogVisible: false,
        resultId: '',
        result: 0
      }
    },
    created() {
      this.init()
    },
    methods:{
      init(){
        this.dataListLoading = true
        resultByTeacherId(this.teacherId, '1', null, null).then(({data}) => {
          if(data.code === 0){
            this.dataList = data.outVos
            this.dataListLoading = false
          }else{
            this.notify("初始化错误，请稍后再试", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("初始化错误，请稍后再试", "error")
        })
        classInfoByTeacherId(this.teacherId).then(({data}) => {
          if(data.code === 0){
            this.classInfos = data.classTos
          }else{
            this.notify("初始化错误，请稍后再试", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("初始化错误，请稍后再试", "error")
        })
      },
      selectResult(){
        this.dataListLoading = true
        resultByTeacherId(this.teacherId, this.options.isNull, this.options.classId, this.options.studentName).then(({data}) => {
          if(data.code === 0){
            this.dataList = data.outVos
            this.dataListLoading = false
          }else{
            this.notify("查询错误，请稍后再试", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("查询错误，请稍后再试", "error")
        })
      },
      addOrUpdateHandle(id, result){
        this.dialogVisible = true
        this.resultId = id
        this.result = 0
        if(result || result == null){
          this.result = result
        }
      },
      updateResult(){
        updateResult(this.resultId, this.result).then(({data}) => {
          if(data.code === 0){
            this.notify("批阅成功", "success")
          }else{
            this.notify("批阅错误，请稍后再试", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("批阅错误，请稍后再试", "error")
        })
        this.dialogVisible = false

        resultByTeacherId(this.teacherId, this.options.isNull, this.options.classId, this.options.studentName).then(({data}) => {
          if(data.code === 0){
            this.dataList = data.outVos
            this.dataListLoading = false
          }else{
            this.notify("查询错误，请稍后再试", "error")
          }
        }).catch(err => {
          console.error(err)
          this.notify("查询错误，请稍后再试", "error")
        })
      }
    }
  }
</script>

<style scoped>

</style>
